<template>
  <!-- 全部商户 -->
  <div id="add">
    <!-- 筛选条件 -->
    <el-card class="box-card" style="margin-bottom: 1rem">
      <el-form ref="form" :model="form" label-width="100px" size="medium">
        <el-row class="topScreen" style="padding: 20px 0px" :gutter="5">
          <el-col :span="5">
            <el-form-item label="代理等级：" prop="username">
              <el-select class="width_100" v-model="form.time">
                <el-option value="1" label="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="进件通道：" prop="username">
              <el-select class="width_100" v-model="form.time">
                <el-option value="1" label="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="添加时间：" label-width="" prop="username">
              <div class="display_flex">
                <div class="flex_1">
                  <el-date-picker
                    v-model="form.time"
                    class="width_100"
                    type="daterange"
                    align="right"
                    unlink-panels
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    :picker-options="pickerOptions"
                  >
                  </el-date-picker>
                </div>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="" label-width="20px" prop="username">
              <el-input
                placeholder="请输入内容"
                v-model="input3"
                class="input-with-select"
              >
                <el-select
                  v-model="form.input4"
                  style="width: 90px"
                  slot="prepend"
                  placeholder="请选择"
                >
                  <el-option label="餐厅名" value="1"></el-option>
                  <el-option label="订单号" value="2"></el-option>
                  <el-option label="用户电话" value="3"></el-option>
                </el-select>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="2">
            <div class="width_100 display_flex">
              <!-- <div class="flex_1"></div> -->
              <el-button class="butBox but1">查询</el-button>
              <el-button class="butBox">重置</el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <!-- 数据展示 -->
    <el-card class="box-card" style="margin-bottom: 20px">
      <div style="display: flex; justify-content: space-evenly">
        <div class="data_look data_look1">
          <div class="zc_text color_white">
            商户总数
            <el-tooltip
              class="item"
              effect="dark"
              content="本级初级代理，代理本机初级（含扩展员）关联商户总数"
              placement="top-start"
            >
              <i class="el-icon-warning-outline"></i>
            </el-tooltip>
          </div>
          <div class="img_text color_white">￥ 12345698</div>
        </div>
        <div class="data_look data_look2">
          <div class="zc_text color_white">
            商户交易总数
            <el-tooltip
              class="item"
              effect="dark"
              content="本级初级代理，代理本机初级（含扩展员）关联商户总数"
              placement="top-start"
            >
              <i class="el-icon-warning-outline"></i>
            </el-tooltip>
          </div>
          <div class="img_text color_white">￥ 12345698</div>
        </div>
        <div class="data_look data_look3">
          <div class="zc_text color_white">
            商户结算总额
            <el-tooltip
              class="item"
              effect="dark"
              content="本级初级代理，代理本机初级（含扩展员）关联商户总数"
              placement="top-start"
            >
              <i class="el-icon-warning-outline"></i>
            </el-tooltip>
          </div>
          <div class="img_text color_white">￥ 12345698</div>
        </div>
        <div class="data_look data_look4">
          <div class="zc_text color_white">
            全部收益
            <el-tooltip
              class="item"
              effect="dark"
              content="本级初级代理，代理本机初级（含扩展员）关联商户总数"
              placement="top-start"
            >
              <i class="el-icon-warning-outline"></i>
            </el-tooltip>
          </div>
          <div class="img_text color_white">￥ 12345698</div>
        </div>
        <div class="data_look data_look5">
          <div class="zc_text color_white">
            渠道总收益
            <el-tooltip
              class="item"
              effect="dark"
              content="本级初级代理，代理本机初级（含扩展员）关联商户总数"
              placement="top-start"
            >
              <i class="el-icon-warning-outline"></i>
            </el-tooltip>
          </div>
          <div class="img_text color_white">￥ 12345698</div>
        </div>
        <div class="data_look data_look6">
          <div class="zc_text color_white">
            本机分润总额
            <el-tooltip
              class="item"
              effect="dark"
              content="本级初级代理，代理本机初级（含扩展员）关联商户总数"
              placement="top-start"
            >
              <i class="el-icon-warning-outline"></i>
            </el-tooltip>
          </div>
          <div class="img_text color_white">￥ 12345698</div>
        </div>
      </div>
    </el-card>
    <!-- 列表 -->
    <el-card class="box-card" style="margin-bottom: 20px">
      <el-button
        type="success"
        @click="add()"
        style="
          float: left;
          padding: 3px 0;
          width: 110px;
          height: 32px;
          margin-bottom: 10px;
          background-color: #3f75ff;
        "
        >添加商户</el-button
      >
      <el-table
        :header-cell-style="{ background: '#E6EFFF' }"
        :data="list"
        style="width: 100%"
      >
        <el-table-column prop="date" label="商户ID">
          <template slot-scope="scope">
            <el-popover trigger="hover" placement="top">
              <p>{{ scope.row.name }}</p>
              <div slot="reference" class="name-wrapper">
                {{ scope.row.name }}
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column prop="date" label="商户名称" width="180">
        </el-table-column>
        <el-table-column prop="date" label="商户编码" width="180">
        </el-table-column>
        <el-table-column prop="date" label="通道类型" width="180">
        </el-table-column>
        <el-table-column prop="date" label="支付手续费" width="180">
        </el-table-column>
        <el-table-column prop="num" label="状态" width="180"> </el-table-column>
        <el-table-column prop="" label="拓展员" width="180">
          <template slot-scope="scope">
            <div class="color1" @click="detailAll(scope.row, '4', '设备列表')">
              {{ scope.row.num }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="date" label="添加时间" width="180">
        </el-table-column>
        <el-table-column
          header-align="center"
          label="操作"
          width="250"
          fixed="right"
        >
          <template slot-scope="scope">
            <el-button
              type="text"
              size="mini"
              @click="Detail('1', scope.row.id)"
              >编辑</el-button
            >
            <el-button
              type="text"
              size="mini"
              @click="ASetting('2', scope.row.id)"
              >商户后台</el-button
            >
            <el-button
              type="text"
              size="mini"
              @click="ASetting('2', scope.row.id)"
              >入网进件</el-button
            >

            <el-dropdown>
              <el-button type="text">更多</el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>
                  <el-button
                    size="mini"
                    type="text"
                    @click="Detail('2', scope.row.id)"
                    >商户详情</el-button
                  >
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-button size="mini" type="text" @click="dialogShow(5)"
                    >账号设置</el-button
                  >
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-button size="mini" type="text" @click="dialogShow(3)"
                    >通道管理</el-button
                  >
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-button @click="dialogShow(1)" size="mini" type="text"
                    >增补终端</el-button
                  >
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-button size="mini" type="text" @click="dialogShow(2)"
                    >参数设置</el-button
                  >
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-button size="mini" type="text" @click="dialogShow(6)"
                    >结算账户</el-button
                  >
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-button size="mini" type="text" @click="dialogShow(4)"
                    >签约配置</el-button
                  >
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-button size="mini" type="text">套餐设置</el-button>
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-button size="mini" type="text">删除商户</el-button>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <div style="text-align: right; margin-right: 90px">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[100, 200, 300, 400]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="400"
      >
      </el-pagination>
    </div>
    <!-- 增补终端 -->
    <el-dialog
      title="增补终端"
      :visible.sync="SupplementalTerminalSHOW"
      width="30%"
      center
    >
      <el-form :model="form" ref="form" :rules="rules">
        <el-row>
          <el-col :span="24">
            <el-form-item prop="num" label-width="130px" label="新增终端数量："
              ><el-input v-model="form.num" placeholder="请输入内容"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="margin_top_20">
          <el-col :span="24">
            <el-form-item label-width="130px" label="申请原因："
              ><el-input
                type="textarea"
                :rows="2"
                placeholder="请输入内容"
                v-model="form.textarea"
              >
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleDialogClose(1)">取 消</el-button>
        <el-button type="primary" @click="SuppTadd(1)">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 参数设置 -->
    <el-dialog
      title="参数设置"
      :visible.sync="parameterShow"
      width="30%"
      center
    >
      <el-form :model="form" ref="form" :rules="rules">
        <el-row>
          <el-col :span="24"><div>参数管理</div></el-col>
        </el-row>
        <el-row class="margin_left">
          <el-col :span="24">
            <el-form-item label-width="130px" label="商户名称："
              >天天理发店</el-form-item
            >
          </el-col>
        </el-row>
        <el-row class="margin_left">
          <el-col :span="24">
            <el-form-item label-width="130px" label="商户编号："
              >HD1233683478</el-form-item
            >
          </el-col>
        </el-row>
        <el-row class="margin_left">
          <el-col :span="24">
            <el-form-item label-width="130px" label="归属上级："
              >汉汇直营</el-form-item
            >
          </el-col>
        </el-row>
        <el-row type="flex" class="margin_left">
          <el-col :span="24">
            <el-form-item
              prop="Timeout"
              label-width="130px"
              label="支付超时事件："
            >
              <el-input placeholder="请输入内容" v-model="form.Timeout">
                <template slot="append">S</template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleDialogClose(2)">取 消</el-button>
        <el-button type="primary" @click="SuppTadd(2)">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 通道管理 -->
    <el-dialog title="参数设置" :visible.sync="channelShow" width="30%" center>
      <el-form :model="form" ref="form" :rules="rules">
        <el-row>
          <el-col :span="24"><div>通道管理</div></el-col>
        </el-row>
        <el-row class="margin_left">
          <el-col :span="24">
            <el-form-item label-width="130px" label="商户名称："
              >天天理发店</el-form-item
            >
          </el-col>
        </el-row>
        <el-row class="margin_left">
          <el-col :span="24">
            <el-form-item label-width="130px" label="归属上级："
              >汉汇直营</el-form-item
            >
          </el-col>
        </el-row>
        <el-row type="flex" class="margin_left">
          <el-col :span="24">
            <el-form-item label-width="130px" label="当前通道：">
              <el-select v-model="radioWay" placeholder="请选择">
                <el-option label="邮储" value="1"> </el-option>
                <el-option label="瑞银信" value="2"> </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleDialogClose(3)">取 消</el-button>
        <el-button type="primary" @click="SuppTadd(3)">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 签约配置 -->
    <el-dialog
      title="签约配置"
      :visible.sync="sign_a_contract"
      width="40%"
      center
    >
      <el-form :model="form" ref="form" :rules="rules">
        <el-row class="margin_left">
          <el-col :span="24">
            <el-form-item label-width="130px" label="简直连状态切换：">
              <el-select v-model="form.copy" placeholder="请选择">
                <el-option label="切换成直连用户" value="1"></el-option>
                <el-option label="切换成间连签约" value="0"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class=" ">
          <el-col :span="24">
            <el-form-item>
              <el-radio-group v-show="form.copy == 0" v-model="form.name">
                <el-radio :label="1">新大陆</el-radio>
                <el-radio :label="2">云闪付</el-radio>
                <el-radio :label="3">富友</el-radio>
                <el-radio :label="4">乐刷</el-radio>
                <el-radio :label="9">瑞银信</el-radio>
                <el-radio :label="10">金控</el-radio>
                <el-radio :label="12">联动优势</el-radio>
                <el-radio :label="13">邮储</el-radio>
                <el-radio :label="15">邮储线上支付</el-radio>
                <el-radio :label="16">利群</el-radio>
                <el-radio :label="7">浦发</el-radio>
                <el-radio :label="19">工行支付</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleDialogClose(4)">取 消</el-button>
        <el-button type="primary" @click="SuppTadd(4)">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 账号设置 -->
    <el-dialog title="账号设置" :visible.sync="passwordShow" width="30%" center>
      <el-form :model="form" ref="form" :rules="rules">
        <el-row class="margin_top_30">
          <el-col :span="24">
            <el-form-item prop="phone" label-width="130px" label="手机号：">
              <el-input
                v-model="form.phone"
                placeholder="请输入手机号"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="margin_top_30">
          <el-col :span="24">
            <el-form-item
              prop="account_number"
              label-width="130px"
              label="登录账号："
            >
              <el-input
                v-model="form.account_number"
                placeholder="请输入登录账号"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="margin_top_30">
          <el-col :span="24">
            <el-form-item
              prop="password"
              label-width="130px"
              label="设置密码："
            >
              <el-input
                type="password"
                v-model="form.password"
                placeholder="请输入密码"
                show-password
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="margin_top_20">
          <el-col :span="24">
            <el-form-item label-width="130px" label="">
              <span class="text_span"
                >备注：首次登陆密码或重置后的密码默认手机号码后6位</span
              >
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button class="button" @click="SuppTadd(5)">保存</el-button>
        <el-button class="reset_button" type="primary" @click="reset"
          >重置密码</el-button
        >
        <el-button @click="handleDialogClose(5)">取消</el-button>
      </span>
    </el-dialog>
    <!-- 结算账户 -->
    <el-dialog
      title="更换结算账户"
      :visible.sync="settle_accounts"
      width="80%"
      center
    >
      <el-form :model="accountForm" ref="form" :rules="accountFormRules">
        <div class="display_flex" style="font-weight: 700">
          <span>
            <img
              class="img_icon"
              src="../../assets/images/Merchantmeal/jeisuanz.png"
              alt=""
            />
          </span>
          结算账户
        </div>
        <div class="display_flex din">
          <div class="width_50">
            <el-row>
              <el-col :span="24">
                <el-form-item
                  prop="name"
                  label-width="120px"
                  label="账户类型："
                >
                  <el-select
                    v-model="accountForm.personal_account"
                    placeholder="请选择账户类型"
                  >
                    <el-option label="对私账户" value="1"> </el-option>
                    <el-option label="对公账户" value="2"> </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col v-if="accountForm.personal_account == 2" :span="24">
                <el-form-item
                  prop="name"
                  label-width="120px"
                  label="账户户名："
                >
                  <el-input
                    v-model="accountForm.account_name"
                    placeholder="请输入账户户名"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col v-if="accountForm.personal_account == 2" :span="24">
                <el-form-item
                  prop="name"
                  label-width="120px"
                  label="公户账号："
                >
                  <el-input
                    v-model="accountForm.account_name"
                    placeholder="请输入公户账号"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col v-if="accountForm.personal_account == 1" :span="24">
                <el-form-item
                  prop="name"
                  label-width="120px"
                  label="结算类型："
                >
                  <el-select
                    v-model="accountForm.personal_account"
                    placeholder="请选择结算类型"
                  >
                    <el-option label="法人结算" value="1"> </el-option>
                    <el-option label="非法人结算" value="2"> </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col v-if="accountForm.personal_account == 1" :span="24">
                <el-form-item
                  prop="name"
                  label-width="120px"
                  label="结算证件类型："
                >
                  <el-select
                    v-model="accountForm.personal_account"
                    placeholder="请选择结算证件类型"
                  >
                    <el-option label="身份证" value="1"> </el-option>
                    <el-option label="护照" value="2"> </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col v-if="accountForm.personal_account == 1" :span="24">
                <el-form-item prop="name" label-width="120px" label="银行卡：">
                  <div class="father_box">
                    <div v-if="accountForm.bank_just" class="item_box">
                      <i
                        @click="see_icon(accountForm.bank_just)"
                        class="el-icon-zoom-in"
                        action="string"
                      ></i>
                      <i @click="del_icon(1)" class="el-icon-delete"></i>
                    </div>

                    <img
                      v-if="accountForm.bank_just"
                      class="img_up_item"
                      :src="accountForm.bank_just"
                      alt=""
                    />
                    <el-upload
                      v-else
                      action="https://jsonplaceholder.typicode.com/posts/"
                      class="img_up_item"
                      :http-request="uploadFile1"
                      :show-file-list="false"
                    >
                      <img
                        class="img_up_item"
                        v-if="!accountForm.bank_just"
                        src="../../assets/images/organization/pic_3.png"
                      />
                    </el-upload>
                  </div>

                  <!-- <img
                    class="img_up"
                    v-if="form.bank_just"
                    :src="form.bank_just"
                    alt=""
                  /> -->
                  <!-- bank_just -->
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col v-if="accountForm.personal_account == 1" :span="24">
                <el-form-item
                  prop="name"
                  label-width="120px"
                  label="银行卡号："
                >
                  <el-input
                    v-model="accountForm.bank_card_number"
                    placeholder="请输入银行卡号"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col v-if="accountForm.personal_account == 1" :span="24">
                <el-form-item
                  prop="name"
                  label-width="120px"
                  label="预留手机号："
                >
                  <el-input
                    v-model="accountForm.bank_card_number"
                    placeholder="请输入银行卡预留手机号"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="24">
                <el-form-item
                  prop="name"
                  label-width="120px"
                  label="开户银行："
                >
                  <el-select
                    v-model="accountForm.personal_account"
                    placeholder="请选择开户银行"
                  >
                    <el-option label="中国银行" value="1"> </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item
                  prop="name"
                  label-width="120px"
                  label="开户支行："
                >
                  <el-select
                    v-model="accountForm.bank_branch_name"
                    placeholder="请选择开户银行"
                  >
                    <el-option label="中国银行" value="1"> </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item
                  prop="name"
                  label-width="120px"
                  label="支行地址："
                >
                  <el-cascader
                    style="width: 90%"
                    :append-to-body="false"
                    v-model="accountForm.bank_branch_asscode"
                    readonly="readonly"
                    size="medium"
                    :props="optionProps"
                    :options="options"
                  ></el-cascader>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="24">
                <el-form-item prop="name" label-width="120px" label="联行号：">
                  <el-input
                    v-model="accountForm.Correspondent_number"
                    placeholder="请输入联行号"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col v-if="accountForm.personal_account == 2" :span="24">
                <el-form-item
                  prop="name"
                  label-width="120px"
                  label="预留手机号："
                >
                  <el-input
                    v-model="accountForm.bank_card_number"
                    placeholder="请输入银行卡预留手机号"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col v-if="accountForm.personal_account == 2" :span="24">
                <el-form-item
                  prop="name"
                  label-width="120px"
                  label="账户证明："
                >
                  <div class="father_box">
                    <div v-if="accountForm.personal_icon" class="item_box">
                      <i
                        @click="see_icon(accountForm.personal_icon)"
                        class="el-icon-zoom-in"
                        action="string"
                      ></i>
                      <i @click="del_icon(4)" class="el-icon-delete"></i>
                    </div>

                    <img
                      v-if="accountForm.personal_icon"
                      class="img_up_item"
                      :src="accountForm.personal_icon"
                      alt=""
                    />
                    <el-upload
                      v-else
                      action="https://jsonplaceholder.typicode.com/posts/"
                      class="img_up_item"
                      :http-request="uploadFile4"
                      :show-file-list="false"
                    >
                      <img
                        class="img_up_item"
                        v-if="!accountForm.personal_icon"
                        src="../../assets/images/Merchantmeal/gonghu.png"
                      />
                    </el-upload>
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col v-if="accountForm.personal_account == 2" :span="24">
                <el-form-item label-width="120px" label="">
                  格式要求：基本存款账户证明，支持 jpg, jpeg
                  png格式，大小不超过10M
                </el-form-item>
              </el-col>
            </el-row>
          </div>
          <div v-if="accountForm.personal_account == 2" class="background_item">
            <img src="../../assets/images/Merchantmeal/jeisuan.png" alt="" />
          </div>
          <div v-if="accountForm.personal_account == 1" class="frame_left">
            <el-row>
              <el-col>
                <el-form-item
                  prop="name"
                  label-width="120px"
                  label="持卡人身份证:"
                >
                  <div class="display_flex max_box">
                    <div class="father_box" style="margin-right: 20px">
                      <div v-if="accountForm.id_card_photo1" class="item_box">
                        <i
                          @click="see_icon(accountForm.id_card_photo1)"
                          class="el-icon-zoom-in"
                        ></i>
                        <i @click="del_icon(2)" class="el-icon-delete"></i>
                      </div>

                      <img
                        v-if="accountForm.id_card_photo1"
                        class="img_up_item"
                        :src="accountForm.id_card_photo1"
                        alt=""
                      />
                      <el-upload
                        v-else
                        action="https://jsonplaceholder.typicode.com/posts/"
                        class="img_up_item avatar-uploader"
                        :http-request="uploadFile2"
                        :show-file-list="false"
                      >
                        <img
                          class="img_up_item"
                          v-if="!accountForm.id_card_photo1"
                          src="../../assets/images/Merchantmeal/shenfenz.png"
                        />
                      </el-upload>
                    </div>
                    <div class="father_box">
                      <div v-if="accountForm.id_card_photo2" class="item_box">
                        <i
                          @click="see_icon(accountForm.id_card_photo2)"
                          class="el-icon-zoom-in"
                        ></i>
                        <i @click="del_icon(3)" class="el-icon-delete"></i>
                      </div>

                      <img
                        v-if="accountForm.id_card_photo2"
                        class="img_up_item"
                        :src="accountForm.id_card_photo2"
                        alt=""
                      />
                      <el-upload
                        v-else
                        action="https://jsonplaceholder.typicode.com/posts/"
                        class="img_up_item avatar-uploader"
                        :http-request="uploadFile3"
                        :show-file-list="false"
                      >
                        <img
                          class="img_up_item"
                          v-if="!accountForm.id_card_photo2"
                          src="../../assets/images/Merchantmeal/shenfenf.png"
                        />
                      </el-upload>
                    </div>
                    <el-button class="reset_button_q" style="margin-left: 20px"
                      >同步法人信息</el-button
                    >
                  </div>

                  <div class="tetx_ges">
                    格式要求：支持jpg,jpeg,png格式，大小不超过10M
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col>
                <el-form-item
                  prop="name"
                  label-width="120px"
                  label="持卡人姓名："
                >
                  <el-input
                    v-model="accountForm.bank_card_holder"
                    placeholder="请输入持卡人姓名"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item
                  prop="name"
                  label-width="120px"
                  label="持卡人身份证："
                >
                  <el-input
                    v-model="accountForm.id_card_number"
                    placeholder="请输入持卡人身份证"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item
                  prop="name"
                  label-width="120px"
                  label="身份证有效期："
                >
                  <el-date-picker
                    class="width_90"
                    v-model="accountForm.stattime"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="请选择省份证发证时间"
                    end-placeholder="请选择省份证结束时间"
                  >
                  </el-date-picker>
                  <el-checkbox
                    v-model="accountForm.stattime"
                    label="长期"
                  ></el-checkbox>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <div class="background">
                  <img
                    src="../../assets/images/Merchantmeal/jeisuan.png"
                    alt=""
                  />
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button class="button" @click="SuppTadd(6)">保存</el-button>

        <el-button @click="handleDialogClose(6)">取消</el-button>
      </span>
    </el-dialog>
    查看照片
    <el-dialog title="查看图片" width="50%" :visible.sync="imgStatus">
      <img :src="see_imgUrl" class="width_100" alt="" />
    </el-dialog>
  </div>
</template>
<script>
import { addressFun } from "../../util/address.js"
import { get, post, tipsFun } from "../../util/request.js"
export default {
  data () {
    return {
      SupplementalTerminalSHOW: false,
      parameterShow: false,
      channelShow: false,
      sign_a_contract: false,
      passwordShow: false,
      settle_accounts: false,
      imgStatus: false,
      see_imgUrl: "",
      optionProps: {
        value: "code",
        label: "name",
        children: "sons"
      },
      options: addressFun(),
      currentPage4: 4,
      list: [
        {
          name: "张三",
          date: "2023-10-26",
          address: "山东省济南市历下区泉城路",
          num: 12,
          state: "1",
          time: "0"
        },
        {
          name: "李四",
          date: "2023-10-26",
          address: "山东省济南市历下区泉城路",
          num: 5,
          state: "2",
          time: "2023-11-8"
        }
      ],
      rules: {
        num: [
          { required: true, message: "请输入新增设备数量", trigger: "blur" }
        ],
        Timeout: [
          { required: true, message: "请输入支付超时事件", trigger: "blur" }
        ],
        phone: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          {
            pattern: /^1\d{10}$/,
            message: "请输入正确的手机号",
            trigger: "blur"
          }
        ],
        account_number: [
          { required: true, message: "请输入登录账号", trigger: "blur" }
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }]
      },
      radioWay: [], // 通道
      search: {},
      form: {},
      accountForm: {
        personal_account: "1"
      },
      accountFormRules: {
        name: [
          { required: true, message: "请输入新增设备数量", trigger: "blur" }
        ]
      }
    }
  },
  watch: {
    timeState () {
      console.log("数据发生变化")
      this.timeValue = ""
    }
  },
  methods: {
    see_icon (val) {
      console.log(val)
      this.imgStatus = true
      this.see_imgUrl = val
    },
    del_icon (val) {
      if (val == 1) {
        this.accountForm.bank_just = ""
        // this.accountForm = Object.assign({}, this.accountForm)
      } else if (val == 2) {
        this.accountForm.id_card_photo1 = ""
      }
    },
    add () {
      this.$router.push({
        name: "merchantadd",
        params: {}
      })
    },
    uploadFile (formData, options) {
      console.log("上传照片", formData, "照片类型", options)
      if (options == 1) {
        this.accountForm.bank_just =
          "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
      } else if (options == 2) {
        this.accountForm.id_card_photo1 =
          "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
      } else if (options == 3) {
        this.accountForm.id_card_photo2 =
          "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
      } else if (options == 4) {
        this.accountForm.personal_icon =
          "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
      }
      this.accountForm = Object.assign({}, this.accountForm)
    },
    // 上传照片
    uploadFile1 (res, file) {
      console.log(111)
      let istype =
        res.file.type == "image/jpeg" ||
        res.file.type == "image/png" ||
        res.file.type == "image/jpg"
      if (!istype) {
        return tipsFun(this, "error", "只能上传JPG、PNG、JPEG格式文件")
      }
      if (res.file.size < 1) {
        return tipsFun(this, "error", "文件大小错误")
      }
      let formData = new FormData()
      formData.append("image", res.file)
      this.uploadFile(formData, 1)
    },
    uploadFile2 (res, file) {
      let istype =
        res.file.type == "image/jpeg" ||
        res.file.type == "image/png" ||
        res.file.type == "image/jpg"
      if (!istype) {
        return tipsFun(this, "error", "只能上传JPG、PNG、JPEG格式文件")
      }
      if (res.file.size < 1) {
        return tipsFun(this, "error", "文件大小错误")
      }
      let formData = new FormData()
      formData.append("image", res.file)
      this.uploadFile(formData, 2)
    },
    uploadFile3 (res, file) {
      let istype =
        res.file.type == "image/jpeg" ||
        res.file.type == "image/png" ||
        res.file.type == "image/jpg"
      if (!istype) {
        return tipsFun(this, "error", "只能上传JPG、PNG、JPEG格式文件")
      }
      if (res.file.size < 1) {
        return tipsFun(this, "error", "文件大小错误")
      }
      let formData = new FormData()
      formData.append("image", res.file)
      this.uploadFile(formData, 3)
    },
    uploadFile4 (res, file) {
      let istype =
        res.file.type == "image/jpeg" ||
        res.file.type == "image/png" ||
        res.file.type == "image/jpg"
      if (!istype) {
        return tipsFun(this, "error", "只能上传JPG、PNG、JPEG格式文件")
      }
      if (res.file.size < 1) {
        return tipsFun(this, "error", "文件大小错误")
      }
      let formData = new FormData()
      formData.append("image", res.file)
      this.uploadFile(formData, 4)
    },
    // 重置密码
    reset () {
      console.log("重置")
    },
    handleDialogClose (val) {
      this.$refs.form.resetFields()
      this.form = {}
      if (val == 1) {
        this.SupplementalTerminalSHOW = false
      } else if (val == 2) {
        this.parameterShow = false
      } else if (val == 3) {
        this.channelShow = false
      } else if (val == 4) {
        this.sign_a_contract = false
        this.radioWay = []
      } else if (val == 5) {
        this.passwordShow = false
      } else if (val == 6) {
        this.settle_accounts = false
      }
    },
    SuppTadd (val) {
      this.$refs.form.validate(valid => {
        if (valid) {
          if (val == 1) {
            this.SupplementalTerminalSHOW = false
          } else if (val == 2) {
            this.parameterShow = false
          } else if (val == 3) {
            this.channelShow = false
          } else if (val == 4) {
            this.sign_a_contract = false
          } else if (val == 5) {
            this.passwordShow = false
            console.log(this.form)
          } else if (val == 6) {
            this.settle_accounts = false
            console.log(this.form)
          }
          console.log(this.form)
          // this.handleDialogClose(val)
        } else {
          console.log("error submit!!")
          return false
        }
      })
    },
    // 增补终端
    dialogShow (val) {
      if (val == 1) {
        this.SupplementalTerminalSHOW = true
      } else if (val == 2) {
        this.parameterShow = true
      } else if (val == 3) {
        this.channelShow = true
      } else if (val == 4) {
        this.sign_a_contract = true
      } else if (val == 5) {
        this.passwordShow = true
      } else if (val == 6) {
        this.settle_accounts = true
      }
    },
    see () {
      this.page = 1
      this.GetAgentList()
    },
    // 查询
    clearFn () {
      this.search = {}
      this.see()
    },
    // 删除照片
    deleteimg (options) {
      if (options == 1) {
        this.form.business_license_photo = ""
      } else if (options == 2) {
        this.form.id_card_just = ""
      } else if (options == 3) {
        this.form.id_card_back = ""
      } else if (options == 4) {
        this.form.bank_img = ""
      }
    },

    // 分页
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
    }
  }
}
</script>

<style scoped>
#add {
  min-height: 100vh;
  background-color: #f0f4f9 !important;
}
.butBox {
  padding: 11px 33px;
}
.topScreen {
  padding: 0px !important;
}

.but1 {
  background-color: #0067d9;
  color: #fff;
}
.max_box {
  align-items: center;
}
.img_up_item {
  width: 86px;
  height: 86px;
  border-radius: 8px;
}
.father_box {
  width: 86px;
  height: 86px;
  position: relative;
}
.item_box {
  width: 86px;
  height: 86px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  color: #fff;
  z-index: 111;
  background-color: rgba(0, 0, 0, 0.5);
}

.din {
  position: relative;
}
/deep/ .el-upload {
  text-align: left !important;
}
.img_icon {
  width: 20px;
  margin: 0 5px 20px 0;
}
.el-upload {
  text-align: left;
}
.frame_left {
  padding-left: 20px;
  border-left: 1px solid #d9d9d9;
}
.el-select {
  width: 90%;
}
.el-input {
  width: 90%;
}
.el-form-item {
  margin-bottom: 20px !important;
}
.background_item {
  text-align: right;
  position: absolute;
  right: 0px;
  bottom: 0px;
}
.background {
  text-align: right;
  margin-top: 40px;
}
.reset_button_q {
  padding: 10px;
  height: 50%;
  color: #3f75ff;
  border: 1px solid #3f75ff;
}
.tetx_ges {
  font-size: 14px;
  font-family: PingFang SC-Medium, PingFang SC;
  font-weight: 500;
  color: #555353;
}
.img_up {
  border-radius: 10px;
  margin-right: 10px;
  text-align: left;
}
.width_50 {
  width: 50%;
}
#add {
  background-color: #fff;
}
.reset_button {
  background-color: #fff;
  color: #0067d9;
  border-radius: 4px;
  border: 1px solid #0067d9;
}
.button {
  background-color: #0067d9;
  color: #fff;
}
.text_span {
  font-size: 12px;
  font-family: Microsoft YaHei-Regular, Microsoft YaHei;
  font-weight: 400;
  color: #ff5252;
}
.el-radio {
  /* margin-right: 4px !important; */
  margin: 15px 8px 4px 0;
}
.margin_left {
  margin-left: 40px;
}
.tar {
  text-align: right;
}
/deep/ .el-table__cell {
  text-align: center;
}
.iclass {
  font-size: 22px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.deleteClass {
  position: relative;
  flex: 1;
}
.deleteClass1 {
  position: relative;
  flex: 1;
}
.deleteClass2 {
  position: relative;
  flex: 1;
}
.deleteClass4 {
  position: relative;
  flex: 1;
}
.img_main {
  margin-right: 20px;
}
.zc_text {
  font-size: 14px;
  font-family: Microsoft YaHei-Regular, Microsoft YaHei;
  font-weight: 400;
  margin: 33px 0 0 15px;
}

.div_tetx {
  font-size: 12px;
  font-family: Microsoft YaHei-Regular, Microsoft YaHei;
  font-weight: 400;
  color: #7c7c7c;
}
.i_tetx {
  font-size: 25px;
  margin-top: 15px;
}
.upload_img {
  width: 86px;
  height: 86px;
  background: #e3e3e3;
  border-radius: 6px 6px 6px 6px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 30%;
  height: 30%;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.el-picker-panel__shortcut {
  color: red;
}
.time_box {
  display: flex;
}
.img_text {
  font-size: 22px;
  font-family: Microsoft YaHei-Bold, Microsoft YaHei;
  font-weight: bold;
  color: #8e4e40;
  margin: 10px 0 0 15px;
}
.color1 {
  color: #23a90d;
  margin-left: 20px;
}
.color {
  color: #2395ff;
  margin-left: 20px;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.data_look {
  padding: 0 20px;
  padding-bottom: 10px;
}
.color_white {
  color: #fff;
}
.data_look1 {
  background-image: url("../../assets/images/Merchantmeal/lanse.png");
  background-repeat: no-repeat;
  background-size: cover;
}
.data_look2 {
  background-image: url("../../assets/images/Merchantmeal/lvse.png");
  background-repeat: no-repeat;
  background-size: cover;
}
.data_look3 {
  background-image: url("../../assets/images/Merchantmeal/huangse.png");
  background-repeat: no-repeat;
  background-size: cover;
}
.data_look4 {
  background-image: url("../../assets/images/Merchantmeal/hongse.png");
  background-repeat: no-repeat;
  background-size: cover;
}
.data_look5 {
  background-image: url("../../assets/images/Merchantmeal/qingse.png");
  background-repeat: no-repeat;
  background-size: cover;
}
.data_look6 {
  background-image: url("../../assets/images/Merchantmeal/zise.png");
  background-repeat: no-repeat;
  background-size: cover;
}
>>> .el-form-item {
  margin-bottom: 0px !important;
}
</style>
